// 首页轮播图区域
import React,{Component} from 'react';
import { View, Text, StyleSheet, Dimensions, Image } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

class Icons extends Component{
    render() {
        return (
            <View style={styles.icons}>
                <View style={styles.iconitem}>
                    <View style={styles.icon}>
                        <Ionicons
                            name={'ios-heart'}
                            size={35}
                        />
                    </View>
                    <Text style={styles.icontitle}>服务介绍</Text>
                </View>

                <View style={styles.iconitem}>
                    <View style={styles.icon}>
                        <Ionicons
                            name={'ios-happy'}
                            size={35}
                        />
                    </View>
                    <Text style={styles.icontitle}>服务介绍</Text>
                </View>

                <View style={styles.iconitem}>
                    <View style={styles.icon}>
                        <Ionicons
                            name={'ios-leaf'}
                            size={35}
                        />
                    </View>
                    <Text style={styles.icontitle}>服务介绍</Text>
                </View>

                <View style={styles.iconitem}>
                    <View style={styles.icon}>
                        <Ionicons
                            name={'ios-megaphone'}
                            size={35}
                        />
                    </View>
                    <Text style={styles.icontitle}>服务介绍</Text>
                </View>

                <View style={styles.iconitem}>
                    <View style={styles.icon}>
                        <Ionicons
                            name={'ios-partly-sunny'}
                            size={35}
                        />
                    </View>
                    <Text style={styles.icontitle}>服务介绍</Text>
                </View>
            </View>
        )
    }
}

// 获得屏幕宽度
let swidth = Dimensions.get('window').width;

let styles = StyleSheet.create({
    icons:{
        flexDirection:'row',
        paddingBottom:10,
        paddingTop:6,
    },
    iconitem:{
        width:'20%',
        alignItems:'center',
        borderRadius:10,
    },
    icon:{
        width:'60%',
        height:swidth/5*0.6,
        borderWidth:1,
        borderColor:'rgba(0,0,0,0.6)',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:10,
    },
    icontitle:{
        fontSize:15,
        marginTop:5,
    },
})


export default Icons;

